<template>
  <div style="margin-bottom:50px;
    backgroundColor:#f0f0f0;width:100%;">
    <!-- 会员俱乐部 -->
    <div style="height:10px;"></div>
    <mt-header>
      <router-link to="" slot="left" @click.native="jiazai('/huiyuan')">
        <mt-button icon="back">会员俱乐部</mt-button>
      </router-link>
      <mt-button  class="gray" slot="right">每日签到积分<span class="mui-icon-extra mui-icon-extra-gold"></span></mt-button>
    </mt-header>
    <div class="mui-content">
		        <ul class="mui-table-view mui-grid-view mui-grid-9">
		            <li class="mui-table-view-cell mui-media mui-col-xs-3 ">
                  <router-link to="/dingdan">
		                    <span class="mui-icon mui-icon-locked"></span>
		                    <div class="mui-media-body">我的订单</div>
                  </router-link></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-3 ">
                  <router-link to="/miaosha">
		                    <span class="mui-icon mui-icon-person-filled"></span>
		                    <div class="mui-media-body">我的秒杀</div>
                  </router-link></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-3 ">
                  <router-link to="zhongchou">
		                    <span class="mui-icon-extra mui-icon-extra-phone"></span>
		                    <div class="mui-media-body">我的众筹</div>
                  </router-link></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-3">
                  <router-link to="yuyue">
		                    <span class="mui-icon mui-icon-checkmarkempty"></span>
		                    <div class="mui-media-body">我的预约</div>
                  </router-link></li>
		        </ul> 
		</div>
    <!-- 我的账户 -->
     <div style="height:10px;"></div>
    <mt-header>
      <router-link to="" slot="left" @click.native="jiazai('/zhanghu')">
        <mt-button icon="back">我的账户</mt-button>
      </router-link>
      <mt-button  class="gray" slot="right">积分兑换商品<span class="mui-icon-extra mui-icon-extra-gold"></span></mt-button>
    </mt-header>
    <div class="mui-content">
		        <ul class="mui-table-view mui-grid-view mui-grid-9">
		            <li class="mui-table-view-cell mui-media mui-col-xs-3 ">
                  <a href="#">
		                    <span class="s1">0</span>
		                    <div class="mui-media-body">账户余额</div>
                  </a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-3 ">
                  <a href="#">
		                    <span class="s1">30</span>
		                    <div class="mui-media-body">我的积分</div>
                  </a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-3 ">
                  <a href="#">
		                    <span class="s1">0</span>
		                    <div class="mui-media-body">我的礼券</div>
                  </a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-3">
                  <a href="#">
		                    <span class="s1">1</span>
		                    <div class="mui-media-body">宝贝收藏</div>
                  </a></li>
		        </ul> 
		</div>
  <!-- 信息查询 -->
   <div style="height:10px;"></div>
   <ul class="refer clear">
     <li>
       <router-link to="" @click.native="jiazai('/weixiu')"> 
        <span class="mui-icon mui-icon-search s3"></span>
        <span class="s2">维修查询</span>
       </router-link>
    </li>
     <li>
       <router-link to="" @click.native="jiazai('/tuihuan')"> 
        <span class="mui-icon mui-icon-personadd s3"></span>
        <span class="s2">保修退换</span>
       </router-link>
    </li>
     <li>
       <router-link to="" @click.native="jiazai('/wuliu')"> 
        <span class="mui-icon mui-icon-person s3"></span>
        <span class="s2">物流查询</span>
       </router-link>
    </li>
     <li>
       <router-link to="" @click.native="jiazai('/dizhi')"> 
        <span class="mui-icon mui-icon-location s3"></span>
        <span class="s2">收货地址</span>
       </router-link>
    </li>
    <li>
       <router-link to="" @click.native="jiazai('/pingjia')"> 
        <span class="mui-icon-extra mui-icon-extra-class s3"></span>
        <span class="s2">评价晒单</span>
       </router-link>
    </li>
    <li>
       <router-link to="" @click.native="jiazai('/tousu')"> 
        <span class="mui-icon mui-icon-checkmarkempty s3"></span>
        <span class="s2">我的投诉</span>
       </router-link>
    </li>
   </ul>
  </div>
</template>
<script>
import { Indicator } from 'mint-ui';
export default {
  data:function(){
    return{}
  },
  methods:{
   jiazai(path){
       Indicator.open('加载中...')
       setTimeout(()=>{
         Indicator.close();
         this.$router.push(path)
       },300)
     }
     }
}
</script>
<style scoped>
.mint-header{
  background-color: #fff;
  color: #000;
  border-bottom: 1px solid #dadada;
}
.mui-grid-view.mui-grid-9{
  background-color: #fff;
  border:none;
  line-height: 0;
  margin-top: 0;
  border-bottom: 1px solid #dadada;
}
.mui-table-view.mui-grid-view .mui-table-view-cell{
  font-size: 9px;
}
.mui-grid-view.mui-grid-9 .mui-table-view-cell{
  padding:0 15px;
  border: none;
}
.mui-icon-extra{
  font-size: 21px;
}
.gray{
  color: #a8a9ab;
}
.s1{
  display: inline-block;
  font-size: 16px;
  color: #f44623;
  line-height: 20px;
  font-weight: bold;
}
.refer{
  background-color: #fff;
}
.refer li{
  float: left;
  width: 50%;
  border-right: 1px solid #dadada;
  border-bottom: 1px solid #dadada;
  text-align: center;
  line-height: 50px;
}
.refer li:last-child,.refer li:nth-child(5){
  border-bottom:none;
}
.s2{
  color: #a8a9ab;
  font-size:16px;
  
}
.s3{
  color: #34a2f1;
}
</style>
